<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';

const props = defineProps({
    targetTimestamp: {
        type: Number,
        required: true
    },
    title: {
        type: String,
        default: ''
    }
});

// 倒计时状态
const countdown = ref({
    days: '00',
    hours: '00',
    minutes: '00'
});

const isCountdownOver = ref(false);
let countdownInterval = null;

// 更新倒计时函数
const updateCountdown = () => {
    const now = new Date().getTime();
    const distance = props.targetTimestamp - now;

    if (distance > 0) {
        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

        countdown.value = {
            days: days.toString().padStart(2, '0'),
            hours: hours.toString().padStart(2, '0'),
            minutes: minutes.toString().padStart(2, '0')
        };
        isCountdownOver.value = false;
    } else {
        countdown.value = { days: '00', hours: '00', minutes: '00' };
        isCountdownOver.value = true;
        clearInterval(countdownInterval);
        countdownInterval = null;
    }
};

const formattedDate = computed(() => {
    const date = new Date(props.targetTimestamp);
    return `${date.getFullYear()}年${(date.getMonth() + 1).toString().padStart(2, '0')}月${date.getDate().toString().padStart(2, '0')}日`;
});

// 生命周期处理
onMounted(() => {
    updateCountdown();
    countdownInterval = setInterval(updateCountdown, 1000);
});

onUnmounted(() => {
    if (countdownInterval) {
        clearInterval(countdownInterval);
        countdownInterval = null;
    }
});
</script>

<template>
    <view class="m-auto w-340px py-2 px-4 bg-white rounded-sm shadow-lg mt-1px">
        <view class="bg-white relative">
            <view class="flex justify-between items-start">
                <!-- 左侧内容 -->
                <view class="flex-1 flex flex-col gap-3">
                    <text class="text-lg font-medium text-gray-900 mb-2">{{ title }}</text>
                    <text class="text-sm text-gray-500">{{ formattedDate }}</text>
                </view>

                <!-- 右侧内容 -->
                <view class="flex flex-col items-end ml-4">
                    <view class="flex items-center mb-3">
                        <text class="text-red-500 text-sm mr-2">倒计时</text>
                        <view
                            class="bg-gradient-to-r from-yellow-400 to-orange-400 text-white text-xs font-bold px-2 py-1 rounded-sm relative">
                            热
                            <view
                                class="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-2 border-r-2 border-t-2 border-transparent border-t-orange-400" />
                        </view>
                        <view class="flex items-center gap-2 ml-4">
                            <text class="text-gray-500 text-sm">更多</text>
                            <image class="w-20 h-60 rounded-full" mode="aspectFit"
                                src="@/assets/img/you.png" />
                        </view>
                    </view>

                    <!-- 倒计时显示 -->
                    <view class="flex items-center space-x-1 mb-3">
                        <view class="flex items-center">
                            <view :class="[
                                'text-sm font-bold px-1 py-1 rounded min-w-[28px] text-center',
                                isCountdownOver ? 'bg-gray-200 text-gray-400' : 'bg-gray-800 text-white'
                            ]">
                                {{ countdown.days }}
                            </view>
                            <text class="text-gray-600 text-sm ml-1">天</text>
                        </view>
                        <view class="flex items-center">
                            <view :class="[
                                'text-sm font-bold px-1 py-1 rounded min-w-[28px] text-center',
                                isCountdownOver ? 'bg-gray-200 text-gray-400' : 'bg-gray-800 text-white'
                            ]">
                                {{ countdown.hours }}
                            </view>
                            <text class="text-gray-600 text-sm ml-1">时</text>
                        </view>
                        <view class="flex items-center">
                            <view :class="[
                                'text-sm font-bold px-1 py-1 rounded min-w-[28px] text-center',
                                isCountdownOver ? 'bg-gray-200 text-gray-400' : 'bg-gray-800 text-white'
                            ]">
                                {{ countdown.minutes }}
                            </view>
                            <text class="text-gray-600 text-sm ml-1">分</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
